<template>
	<view class="content" v-if="show">
		<view class="avatar-wrap">
			<u--image :showLoading="true" width="100px" height="100px" mode="aspectFill" :src="avatar" shape="circle">
			</u--image>
			<view class="upbtn" @click="uploadAvatar">更改头像</view>
		</view>
		<view class="center">
			<form @submit="formSubmit" @reset="formReset">
				<u-cell-group>
					<u-cell>
						<view slot="title" class="u-slot-title">
							<view class="uni-form-item uni-column inp">
								<view class="title">用户名 :</view>
								<input disabled class="uni-input" name="username" :value="userInfo.username"
									:placeholder="userInfo.username" />
							</view>
						</view>
					</u-cell>
					<u-cell isLink>
						<view slot="title" class="u-slot-title">
							<view class="uni-form-item uni-column inp">
								<view class="title">密 码 :</view>
								<input class="uni-input" name="password" placeholder="重置密码" />
							</view>
						</view>
					</u-cell>
					<u-cell isLink>
						<view slot="title" class="u-slot-title">
							<view class="uni-form-item uni-column inp">
								<view class="title">电 话 :</view>
								<input class="uni-input" name="phone" :value="userInfo.phone" placeholder="请输入手机号码" />
							</view>
						</view>
					</u-cell>
					<u-cell isLink>
						<view slot="title" class="u-slot-title">
							<view class="uni-form-item uni-column inp">
								<view class="title">性 别 :</view>
								<input class="uni-input" name="gender" :value="userInfo.gender" placeholder="性别" />
							</view>
						</view>
					</u-cell>
					<u-cell isLink>
						<view slot="title" class="u-slot-title">
							<view class="uni-form-item uni-column inp">
								<view class="title">简 介 :</view>
								<input class="uni-input" name="introduction" :value="userInfo.introduction"
									placeholder="请输入简介" />
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<view class="uni-btn-v btns">
					<button class="btn" form-type="submit">点击修改</button>
					<button class="btn" form-type="reset">清除操作</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				avatar: '',
				show: false,
				BaseUrl: '',
				ImgUrl: '',
				passshow: false
			}
		},
		onShow() {
			let BaseUrl = getApp().globalData.BaseUrl
			let ImgUrl = getApp().globalData.ImgUrl
			this.BaseUrl = BaseUrl
			this.ImgUrl = ImgUrl
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					title: "请先登录",
					duration: 1000
				})
			} else {
				uni.request({
					url: BaseUrl + '/user/userDetail',
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'token': token
					},
					success: (res) => {
						let data = res.data.data
						if (data.gender == 0) data.gender = "女"
						else if (data.gender == 1) data.gender = "男"
						// // console.log(data.gender)

						this.userInfo = data
						// this.userInfo.password = ''
						this.avatar = ImgUrl + data.avatar
						// // console.log(this.avatar)
						uni.setStorageSync('userinfo', this.userInfo)
					}
				})
				this.show = true
			}

		},
		methods: {
			passZhengZe(password) {
				const regex =
					/^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/
				// // console.log(password, regex.test(password))
				if (!regex.test(password)) {
					return 0;
				} else {
					return 1;
				}
			},
			formSubmit: function(e) {
				let token = uni.getStorageSync('token')
				let formdata = e.detail.value
				let gender = -1
				// uni.showModal({
				// 	content: '表单数据内容：' + JSON.stringify(formdata),
				// 	showCancel: false
				// });
				if (!formdata.username) {
					formdata.username = this.userInfo.username
				}
				if (!formdata.password) {
					formdata.password=this.userInfo.password
				} else if (!this.passZhengZe(formdata.password)) {
					uni.showModal({
						content: "密码至少八个字符，至少包含一个字母,数字,字符!",
						icon: "none"
					})
					return 0;
				}
				if (formdata.gender !== '男' && formdata.gender !== '女') {
					uni.showToast({
						title: "性别输入格式错误(男/女)",
						icon: "none"
					})
					return 0;
				} else if (formdata.gender == '男') {
					gender = 1
				} else if (formdata.gender == '女') {
					gender = 0
				}
				uni.request({
					url: this.BaseUrl + "/user/update",
					method: "POST",
					header: {
						'token': token
					},
					data: JSON.stringify({
						username: formdata.username,
						password: formdata.password,
						phone: formdata.phone,
						gender: gender,
						introduction: formdata.introduction
					}),
					success: (res) => {
						// // console.log(res)
						if (res.data.code === 200) {
							uni.showToast({
								title: "修改成功！"
							})
						}
						if (res.data.code === 901) {
							uni.showToast({
								title: "手机号格式错误！",
								icon: "none"
							})
						}
					}
				})

			},
			formReset: function(e) {
				// // console.log('清空数据')
			},
			uploadAvatar() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (res.tempFilePaths[0]) {
							let filePath = res.tempFilePaths[0]
							let token = uni.getStorageSync('token')
							wx.compressImage({
								src: filePath,
								quality: 20,
								success: (ress) => {
									// // console.log("压缩结果", ress)
									uni.uploadFile({
										url: this.BaseUrl + '/user/updateAvatar',
										filePath: ress.tempFilePath,
										methods: 'POST',
										name: 'file',
										header: {
											"Content-Type": "multipart/form-data",
											'token': token
										},
										success: (res) => {
											uni.request({
												url: this.BaseUrl +
													'/user/userDetail',
												method: 'GET',
												header: {
													'Content-Type': 'application/json',
													'token': token
												},
												success: (res) => {
													let data = res.data
														.data
													if (data.gender == 0)
														data.gender = "女"
													else if (data.gender ==
														1) data.gender =
														"男"
													this.userInfo = data
													// this.userInfo.password = ''
													this.avatar = this
														.ImgUrl + data
														.avatar
													uni.setStorageSync(
														'userinfo',
														this
														.userInfo)
												}
											})
										},
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.avatar-wrap {
			margin-top: 50upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.upbtn {
				margin-top: 20upx;
				font-size: 32upx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 148upx;
				height: 50upx;
				background-color: #eee;
				line-height: 50upx;
				border-radius: 30upx;
				box-shadow: 0 0 1upx #888;
			}
		}

		.center {
			margin-top: 50upx;
			width: 80%;

			/* App.vue */
			.cell-hover-class {
				background-color: rgb(235, 237, 238);
			}

			/* 或者单是设置透明度 */
			.cell-hover-class {
				opacity: 0.5;
			}

			.inp {
				display: flex;
			}

			.btns {
				display: flex;
				margin-top: 80upx;

				.btn {
					background-color: $color;
					color: #fff;
				}
			}
		}

	}
</style>
